<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <script src="/kissy/build/seed-debug.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>
    <script src="/kissy/src/log.js"></script>
</head>
<body>
<h1>open in ios safari test swipe event</h1>

<h2>swipe</h2>

<div id="t"
     class='placeholder'
     style="
     width: 200px;
     height: 200px;
     overflow: hidden;
     -ms-touch-action:none;
     border: 1px solid red;
     ">
    do not cause native scroll
</div>
<br>

<div id="t2"
     class='placeholder'
     style="
     width: 200px;
     height: 200px;
     overflow: hidden;
     -webkit-user-drag:none;
     -ms-touch-action:pan-y;
     -webkit-user-select:none;
     -webkit-tap-highlight-color:rgba(0,0,0,0);
     border: 1px solid red;
     ">
    cause native scroll
</div>

<br>
<button id='remove'>remove</button>

<br><br><br><br><br>
<div id="d">
    <div id="x" class="x" style="width: 200px;height: 200px;border: 1px solid red;display: inline-block;">
x
    </div>

    <div id="y" class="y" style="width: 200px;height: 200px;border: 1px solid red;display: inline-block;">
y
    </div>
</div>

<div style="height: 900px;"></div>
<script>
    KISSY.use(['event/dom', 'node', 'event/gesture/swipe'], function (S, Event, Node, SwipeType) {
        var $ = Node.all;
        var SWIPE = SwipeType.SWIPE;

        $('.placeholder').append('<p><a href="http://www.g.cn">google</a></p> ' +
                new Array(2).join('<p> ' + (new Array(2).join('h')) + '  </p>'));

        Event.on('#t', SWIPE, {
            fn: function (e) {
                log(e.target.id + ' : ' + e.direction + ' : ' + e.duration + ' : ' + e.distance);
            },
            preventDefault: {
                left: 1,
                right: 1,
                up: 1,
                down: 1
            }
        });

        Event.on('#t2', SWIPE, {
            fn: function (e) {
                log(e.target.id + ' : ' + e.direction + ' : ' + e.duration + ' : ' + e.distance);
            }
        });

        $('#d').on(SWIPE,{
            fn: function (e) {
                log(e.target.id + ' : ' + e.direction + ' : ' + e.duration + ' : ' + e.distance);
            },
            preventDefault: {
                left: 1,
                right: 1,
                up: 1,
                down: 1
            },
            filter:'.x'
        });

        $('#remove').on('click', function () {
            Event.detach('#t');
            Event.detach('#t2');
        });
    });
</script>